<script setup>
import {computed, reactive} from "vue";
import axios from "axios";

const sourceDatabase = reactive({
  url: '',
  port: '3306',
  selectDatabaseName: '',
  username: '',
  password: ''
})
const targetDatabase = reactive({
  url: '',
  port: '3306',
  selectDatabaseName: '',
  username: '',
  password: ''
})

const getTargetUrl = computed(() => {
  return `jdbc:mysql://${targetDatabase.url}:${targetDatabase.port}/${targetDatabase.selectDatabaseName}?useUnicode=true&characterEncoding=utf8&useSSL=false`
})
const getSourceUrl = computed(() => {
  return `jdbc:mysql://${sourceDatabase.url}:${sourceDatabase.port}/${sourceDatabase.selectDatabaseName}?useUnicode=true&characterEncoding=utf8&useSSL=false`
})

</script>

<template>
  <div>
    <div style="display: flex">
      <a-card title="源数据库(开发数据库)" style="width: 50%">
        <a-form>
          <a-form-item label="数据库类型">
            <a-select style="width: 100%" value(v-model)="mysql">
              <a-select-option value="mysql">MySQL</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数据库地址">
            <a-input v-model:value="sourceDatabase.url" placeholder="请输入数据库地址"/>
          </a-form-item>
          <a-form-item label="数据库端口">
            <a-input v-model:value="sourceDatabase.port" placeholder="请输入数据库端口"/>
          </a-form-item>
          <a-form-item label="数据库名称">
            <a-input v-model:value="sourceDatabase.selectDatabaseName" placeholder="请输入数据库名称"/>
          </a-form-item>
          <a-form-item label="url">
            <div>{{ getSourceUrl }}</div>
          </a-form-item>
          <a-form-item label="用户名">
            <a-input v-model:value="sourceDatabase.username" placeholder="请输入用户名"/>
          </a-form-item>
          <a-form-item label="密码">
            <a-input v-model:value="sourceDatabase.password" type="password" placeholder="请输入密码"/>
          </a-form-item>
        </a-form>
      </a-card>
      <a-card title="目标数据库(生产数据库)" style="width: 50%">
        <a-form>
          <a-form-item label="数据库类型">
            <a-select style="width: 100%">
              <a-select-option value="mysql">MySQL</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数据库地址">
            <a-input v-model:value="targetDatabase.url" placeholder="请输入数据库地址"/>
          </a-form-item>
          <a-form-item label="数据库端口">
            <a-input v-model:value="targetDatabase.port" placeholder="请输入数据库端口"/>
          </a-form-item>
          <a-form-item label="数据库名称">
            <a-input v-model:value="targetDatabase.selectDatabaseName" placeholder="请输入数据库名称"/>
          </a-form-item>
          <a-form-item label="用户名">
            <a-input v-model:value="targetDatabase.username" placeholder="请输入用户名"/>
          </a-form-item>
          <a-form-item label="密码">
            <a-input v-model:value="targetDatabase.password" type="password" placeholder="请输入密码"/>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <div>
      <a-button block type="primary">同步</a-button>
    </div>
  </div>


</template>

<style scoped>

</style>